import {Router,Route,hashHistory,IndexRedirect} from "react-router";

export default React.createClass({
	isG:true,
	que:function(){
		var sp = $("#que")
		if(this.isG){
			sp.css({background:"#f0f0f0",color:"#f0f0f0"})
			this.isG = false
		}else{
			sp.css({background:"green",color:"#fff"}).text("√")
			this.isG = true
		}
	},
	//封装一个判断按钮腱的颜色的方法,传一个当前点击的this对象
	la:function(box){
						var obj=box.parent().siblings().find("input").eq(2)
						if( (obj.eq(0).val() !="")&&(obj.eq(1).val() !="")&&(obj.eq(2).val() !="")&&(obj.eq(3).val() !="")){
							 $(".pt_sub").css({background:"red",color:"#fff"})
						}else{
							$(".pt_sub").css({background:"",color:"#444"})
						}
	},
	//用户名验证 
	componentDidMount:function(){ 
		var that = this
		$(".from_one input").each(function(){
			//判断里面是否有内容
			$(this).on("input",function(){
				if($(this).val() != ""){
			//当全部不为空时按钮亮起来
					that.la($(this))
					$(this).parent().find("b").css({display:"block"})
				}else if($(this).val() ==""){
					$(this).parent().find("b").css({display:"none"})
				}
				
			})
			
			//判断注册按钮是否应该量
			
			
		})
		//清空按钮
		$(".from_one b").each(function(){
			$(this).on("click",function(){
				 $(this).parent().find("input").val("")
				 $(this).css({display:"none"})
				 //每次关闭一个都会关闭按钮颜色
				  $(".pt_sub").css({background:"",color:"#444"})
			})
		})
	},
	sub:function(e){ 
		e.preventDefault()
		//判断当前表单状态,全部不合格
		var obj={
			user : false,
			pas : false,
			paspas : false,
			mail : false
		}
		 
		//账号
		var Zuser = /^\w{6,16}$/
		if(Zuser.test(this.refs.user.value)){
			obj.user = true
		}else{
			obj.user = false
			$(".one_ti").text("对不起您的账号格式不正确")
		}
		//密码
		if(Zuser.test(this.refs.pas.value)){
			obj.pas = true
		}else{
			obj.pas = false
			$(".one_ti").text("对不起您的密码格式不正确")
		}
		//确认密码
		if(this.refs.pas.value == this.refs.paspas.value){
			obj.paspas = true
		}else{
			obj.paspas = false
			$(".one_ti").text("对不起您的两次密码不相同")
		}
		//邮箱
		var Umail = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/
		if(Umail.test(this.refs.mial.value)){
			obj.mail = true
		}else{
			obj.mail = false
			$(".one_ti").text("对不起您的邮箱格式不正确")
		}
		//全部判断一遍,成功跳转,不成功弹出提示
		if((obj.user==true)&&(obj.pas==true)&&(obj.paspas==true)&&(obj.mail==true)){
			//把当前用户存储到数据库中
			localStorage.setItem(this.refs.user.value,this.refs.pas.value)
			//跳转到登录页面
			hashHistory.push("sign") 
			
		}else{
			$(".one_ti").css({display:"block"})
			//点击任意地方消失,重新修改格式
			$("body").click(function(){
				$(".one_ti").css({display:"none"})
			})
		}
		
	},
	render : function(){
		return (
			<div>
					<form className="from_one" onSubmit={this.sub}>
						<div className="pt_user_cls">
						<section>
							<span>用&nbsp;户&nbsp;名</span>
							<input type="text" placeholder="请输入6-20个字符" ref="user"/>
							<b>×</b>
						</section>
						<section>
							<span>设置密码</span>
							<input type="password" placeholder="请输入6-20位密码" ref="pas"  />
							<b>×</b>
						</section>
						<section>
							<span>确认密码</span>
							<input type="password" placeholder="请再次输入密码" ref="paspas"  />
							<b>×</b>
						</section>
						<section>
							<span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</span>
							<input type="text" placeholder="请输入常用邮箱地址" ref="mial" />
							<b>×</b>
						</section>
						</div>
						<div className="user_xieyi">
								<span onClick={this.que} id="que">√</span>同意<a>用户注册协议</a>
						</div>
						<input type="submit" defaultValue="注册" className="pt_sub"/>
						<div className="one_ti"></div>
					</form>
			</div>
		)
	}
})
